<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('c9FUBJDGR89kOc3fad4K-')}}</p>
      <div class="operate-area">
        <!-- <div class="inline-item selection-item">
          <label class="title">{{$t('3XCbmVH_U3ZYTtc5eh9SZ')}}:</label>
          <div class="content">
            <Select
              v-model="agentId"
              style="width: 200px"
              @on-change="changeAgentName"
            >
              <Option v-for="item in allAgents" :key="item.id" :value="item.id">
                {{ item.name }}
              </Option>
            </Select>
          </div>
        </div>
        <div class="inline-item search-item">
          <Input v-model="username" @on-enter="searchTable">
            <span slot="prepend">{{$t('0_a5BTvbN5oM-HGGemU60')}}</span>
            <Button
              slot="append"
              icon="ios-search"
              @click="searchTable"
            ></Button>
          </Input>
        </div> -->
      </div>
      <Table :loading="loading" :columns="columns" :data="data">
        <template slot-scope="{ row }" slot="type">
          <tag :color="row.operatorid != 0 && row.stationid != 0 ? 'orange' : 'green' ">{{ row.operatorid != 0 && row.stationid != 0 ? $t('SWJNpRnfSDK7MAg0omTmr') : $t('agt') }}</tag>
        </template>
      </Table>
      <!-- <Page
        class="page-component"
        size="small"
        :total="total"
        show-sizer
        show-elevator
        show-total
        :current.sync="current"
        :page-size="pageSize"
        :page-size-opts="pageSizeOpts"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page> -->
    </Card>
  </div>
</template>

<script>
import { getUserList, getAgentTableData } from '@/api/data2'

export default {
  name: 'user_query',
  props: {
    id: {
      type: String
    }
  },
  data () {
    return {
      username: '',
      agentId: +this.id,
      loading: false,
      allAgents: [],
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: this.$t('agt'),
          key: 'agentName',
          width: 250
        },
        {
          title: this.$t('CgvrhWPTyNdWuKL0t5z6A'),
          key: 'name',
          width: 250
        },
        {
          title: this.$t('a-LXwsl7nkF5v_u7gORNm'),
          key: 'pwd'
        },
        {
          title: this.$t('62kqUnZRorEMwgT5dk5qX'),
          slot: 'type'
        },
        {
          title: this.$t('Bp-VSE3SuRvMKppg6_O6o'),
          key: 'roleid'
        }
      ],
      data: [],
      total: 10,
      current: 1,
      pageSize: 5,
      pageSizeOpts: [5, 10, 15, 20]
    }
  },
  async mounted () {
    await this.queryAgentList()
    await this.queryTable()
  },
  computed: {
    isAdmin () {
      return this.$store.getters.isAdmin
    },
    isAgent () {
      return this.$store.getters.isAgent
    }
  },
  watch: {
    '$route': async function () {
      await this.queryAgentList()
      await this.queryTable()
    }
  },
  methods: {
    async queryAgentList () {
      const { code, data, desc } = await getAgentTableData()
      if (code == 200) {
        this.allAgents = data.datalist || []
      } else {
        this.$Message.error(desc)
      }
    },
    changeAgentName () {
      this.queryTable()
    },
    searchTable () {
      this.queryTable()
    },
    async queryTable ({
      current = this.current,
      pageSize = this.pageSize,
      search = this.username
    } = {}) {
      this.loading = true
      const { code, data, desc } = await getUserList({
        search: search,
        operatorid: +this.id,
        stationid: 0
      })
      if (code == 200) {
        let datalist = data.datalist || []
        datalist = datalist.map(d => {
          const agent = this.allAgents.find(a => a.id == this.id)
          return _.assign({}, d, {
            agentName: agent ? agent.name : 'unkown'
          })
        })
        this.data = datalist
      } else {
        this.$Message.error(desc)
      }
      this.loading = false
    },
    changePage (num) {
      this.queryTable({ current: num })
    },
    changePageSize (num) {
      this.queryTable({ pageSize: num })
    }
  }
}
</script>
